<template>
  <div class="tab-container">
    <!--<el-input style="width: 200px;" />-->
    <!--<el-button type="primary" style="margin-left: 10px;">搜索</el-button>-->

    <!--<el-dropdown style="float:right;margin-left: 10px; color: #0a76a4" trigger="click">-->
      <!--<span class="el-dropdown-link">-->
     <!--<i class="el-icon-download"></i> 导出<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
      <!--</span>-->
      <!--<el-dropdown-menu slot="dropdown" >-->
        <!--<el-dropdown-item icon="el-icon-plus">导出此页</el-dropdown-item>-->
        <!--<el-dropdown-item icon="el-icon-plus">导出全部</el-dropdown-item>-->
      <!--</el-dropdown-menu>-->
    <!--</el-dropdown>-->

    <el-tabs v-model="activeName" style="margin-top:15px;" >
      <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key" >
      </el-tab-pane>
    </el-tabs>
    <keep-alive>
      <!-- v-if="activeName==item.key" :type="item.key"   -->
      <!-- 、@handleSizeChange="handleSizeChange" -->
      <tab-pane  :pagesize="pagesize" :pageSizes='pageSizes' :total="total" :currentPage="currentPage" :type="activeName" :classList='classListData'   @handleCurrentChange="handleCurrentChange"/>
    </keep-alive>
    <el-pagination
     background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
  import TabPane from './components/TabPane'
  export default {
    components: { TabPane },
    
    data() {
      return {
        // 课程信息列表数据
        classListData:[],
        tabMapOptions: [
          { label: '待审批', key: 'D' },
          { label: '未通过', key: 'W' },
          { label: '已通过', key: 'Y' }
        ],
        activeName: 'D',
        createdTimes: 0,
        userId:'',
        result:0,
        pagesize:10,
        currentPage:1,
        total:0,
        pageSizes: [10, 50, 100, 200, 500],
        // 条数变化
        val:''
      }
    },
    watch: {
      activeName(val) {
        //this.$router.push(`${this.$route.path}?tab=${val}`)
        if(val=='D'){
          // 待审核
          this.result=0
          this.teacherListData=[]
          this.getClassListData()
        }else if(val=='W'){
          // 未通过
          this.result=2
          this.teacherListData=[]
          this.getClassListData()
        }else {
          // 已通过
          this.result=1
          this.teacherListData=[]
          this.getClassListData()
        }
      },
      $route: {
        deep: true,
        immediate: true,
        handler(val) {
          console.log('index这里监听路由index这里监听路由',val)
          if(val){
            if(val.query.status==1){
              this.activeName='Y'
            }
            console.log('获取最终赋值后的tab导航栏',this.activeName)
            this.getClassListData();
          }
          
        },
      },
    },
    created() {
      const tab = this.$route.query.tab
      console.log('获取indexcreated',tab)
      if (tab) {
        this.activeName = tab
      }
      this.userId=this.$route.params.userId
      console.log('1111',this.userId)
      // 获取课程信息列表
      this.getClassListData()
    },
    methods: {
          // 条数变化
      handleSizeChange(val) {
        console.log('课程父组件中的条数变化',val,this.pagesize,this.currentPage,this.total)
        this.pagesize=val
        this.val=val
        this.currentPage=1
        this.getClassListData()
        this.$emit('valCourse',this.val)
      },
      // 换页
      handleCurrentChange(val) {
        console.log('课程父组件中的页数变化',val,this.pagesize,this.currentPage,this.total)
        this.currentPage=val
        this.getClassListData()
      },
       // 获取课程信息列表
      getClassListData(){
          this.$http({
          url: this.$http.adornUrl('/info/courseList?result='+this.result+'&limit='+this.pagesize+'&page='+this.currentPage+'&userId='+this.userId
          ),
          method: 'post',
          data:{}
        }).then(res=>{
          console.log('子组件',res)
          if(res.data.code==0){
            this.classListData=res.data.page.list
            this.total=res.data.page.totalCount
            this.$emit('course',this.result, res.data.page.list,)
          }
        })
      },
      showCreatedTimes() {
        this.createdTimes = this.createdTimes + 1
      }
    }
  }
</script>

<style scoped>
  .tab-container {
    /* margin: 30px; */
  }
</style>
